<template>
  <view class="good-list">
    <u-cell-group v-for="(item, index) in list" :key="index">
      <u-cell-item :title="item" class="u-cell-item" @click="clickItem(item)"></u-cell-item>
    </u-cell-group>
    <!-- 设置wif -->
    <u-popup v-model="popup.show" border-radius="10" mode="center">
      <view class="u-popup">
        <view class="u-popup-title">wifi</view>
        <view class="u-popup-center">
          <u-form ref="uForm" :model="popup.form" label-width="120">
            <u-form-item :label="$t('wifi名称')" prop="wifiName" required>
              <u-input v-model="popup.form.wifiName" disabled />
            </u-form-item>
            <u-form-item :label="$t('wifi密码')" prop="wifiPassword" required>
              <u-input v-model="popup.form.wifiPassword" />
            </u-form-item>
          </u-form>
        </view>
        <view class="u-popup-foot">
          <text class="text" @click="popup.show = false">{{$t('取消')}}</text>
          <text class="text text1" @click="breakOff()">{{$t('断开wifi')}}</text>
          <text class="text text2" @click="seachComfig">{{$t('确定')}}</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api'])
  },
  props: {
    list: {
      type: [Array],
      default() {
        return []
      }
    },
    signetId: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      popup: {
        show: false,
        form: {
          wifiPassword: '', //wifi密码
          wifiName: '' //wifi名
        },
        rules: {
          wifiName: [
            {
              required: true,
              message: this.$t('必填'),
              trigger: 'blur,change'
            }
          ]
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    clickItem(item) {
      //console.log(item);
      this.popup.form = {
        wifiPassword: '', //wifi密码
        wifiName: '' //wifi名
      }

      this.popup.form.wifiName = item
      this.popup.show = true
      setTimeout(() => {
        this.$refs.uForm.setRules(this.popup.rules)
      }, 1000)
    },
    //wifi连接
    seachComfig() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.setWifiLink()
        }
      })
    },
    breakOff() {
      let req = {
        signetId: this.signetId,
        ...this.popup.form,
        wifiPassword: ''
      }
      this.$u.post(this.api.GLOBAL_signet_closeWifi, req).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            title: this.$t(res.msg),
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    setWifiLink() {
      let req = {
        signetId: this.signetId,
        ...this.popup.form
      }
      this.$u.post(this.api.GLOBAL_signet_setWifiLink, req).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            title: this.$t(res.msg),
            icon: 'none',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.good-list {
  background-color: #fff;
  width: 100%;

  .u-cell-item {
    padding: 10rpx 32rpx;

    .title {
      color: #000000;
    }
  }

  .u-popup {
    padding: 20rpx 20rpx 0;

    .u-popup-title {
      width: 100%;
      text-align: center;
    }

    .u-popup-center {
    }

    .u-popup-foot {
      display: flex;
      justify-content: space-between;

      .text {
        flex: 1;
        text-align: center;
        line-height: 80rpx;
      }

      .text2 {
        color: #007aff;
      }

      .text1 {
        color: #aa0000;
      }
    }
  }
}
</style>
